<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: url(img/01.jpg) no-repeat;
				background-size: cover;
			}
			table{
				color: #00BFFF;
				width:600px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			table tr{
				height: 50px;
			}
			input{
				box-sizing: border-box;
				border: 1px solid #444444;
				width: 300px;
				height: 30px;
				border-radius: 5px;
				padding: 0 10px;
			}
			#sub,#res{
				width: 80px;
				background: #5BC0DE;
				cursor: pointer;
			}
			h2,p{
				line-height: 100px;
				text-align: center;
				font-size: 40px;
				color: darksalmon;
			}
			a{
				position: absolute;
				cursor: pointer;
				width: 100px;
				height: 50px;
				font-size: 25px;
				right: 50px;
				top: 50px;
				background: chartreuse;
				border-radius: 5px;
				line-height: 50px;
				color: #fff;
				text-align: center;
				text-decoration: none;
			}
			a:hover{
				background: fuchsia;
				color: #000;
			}
		</style>
		<script src="urla.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h2>
			请注册😊
		</h2>
		<a href=`${url}/login.html`>登录</a>
		<p></p>
		<form >
			<table border="1px" cellspacing="0">
				<tbody>
					<tr>
						<td rowspan="4" align="center">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr >
						<td align="right">用户名：</td>
						<td>
							<input type="text" id="uname" placeholder="请输入用户名">
						</td>
					</tr>
					<tr >
						<td align="right">密码：</td>
						<td>
							<input type="password" id="pwd" placeholder="请输入密码">
						</td>
					</tr>
					<tr >
						<td colspan="2" align="center">
							<input type="button" id="sub" value="提交">
							<input type="reset" id="res" value="重置">
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		<script src="jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$("#sub").click(()=>{
				if(!$("#uname").val() || !$("#pwd").val() || $("#pwd").val().length < 8){
					$("p").html("请填写完整用户名与密码且密码不得小于8位");
					return;
				}
				$("p").html("");
				$.ajax({
					url:`${url}/addun`,
					data:{
						uname:$("#uname").val(),
						pwd:$("#pwd").val()
					},
					success(data){
						if(data === "success"){
							// alert("注册成功");
							// sessionStorage.setItem("uname",$("#uname").val());
							// sessionStorage.setItem("pwd",$("#pwd").val());
							// location.href = `${url}/`;
							$("p").html("注册成功，请前往登录页面登录");
							$("#uname").val("");
							$("#pwd").val("");
						}
						if(data === "already"){
							$("p").html("用户名已使用");
						}
						if(data === "fail"){
							$("p").html("注册失败");
						}
					}
				})
			})
		</script>
	</body>
</html>